<!-- modal -->
<template>
  <transition name="fade">
    <view class="modal-wrap" v-if="visible">
      <view class="modal-mask" @click="close"></view>
      <view class="modal" :style="initStyle">
        <slot name="header"></slot>
        <slot name="body"></slot>
        <slot name="footer"></slot>
      </view>
      <image v-show="showClose" class="close" src="../static/roundclose.png" @click="close">
    </view>
  </transition>
</template>

<script>
/* eslint-disable */
export default {
  name: 'Modal',
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    initStyle: {
      type: Object,
      default: function () {
        return {}
      }
    },
    showClose: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    close () {
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
@keyframes dialog-zoom {

    0% {
      transform: scale(0)
    }

    50% {
      transform: scale(1.1)
    }

    100% {
      transform: scale(1)
    }
}

.modal-wrap {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
}

  .modal-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    background: #000000;
    opacity: 0.7;
  }

  .modal {
    position: absolute;
    top: 100upx;
    min-width: 600upx;
    min-height: 300upx;
    height: 600upx;
    max-height: 1000upx;
    width: 500upx;
    overflow-x: hidden;
    overflow-y: scroll;
    box-shadow: 0 5upx 15upx rgba(0, 0, 0, 0.2);
    animation: dialog-zoom 0.4s;
    background: #fff;
    border-radius: 6upx;
  }
  .close {
    position: absolute;
    top: 920upx;
    width: 60upx;
    height: 60upx;
  }
</style>


<!-- <template>
	<view class="modal-wrap" v-show="visible">
		<view class="modal-mask"></view>
		<view class="modal" :style="initStyle">
			<view name="header"></view>
			<view name="body"></view>
			<view name="footer"></view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'ApplyModal',
	props: {
		visible: {
		    type: Boolean,
		    default: false,
		    required: true
		},
		title: {
		    type: String,
		    default: ''
		},
		initStyle: {
		    type: Object,
		    default: () => ({
					width: '500upx'
		    })
		}
	  },
	watch: {
		visible: function (curVal) {

		}
	},
	methods: {
		close () {
		    this.$emit('update:visible', false)
		}
	  }
}
</script>

<style lang="scss" scoped>
@keyframes dialog-zoom {
    0% {
		transform: scale(0);
	}
    50% {
		transform: scale(1.1);
	}
    100% {
		transform: scale(1);
	}
}

.modal-wrap {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  .modal-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: rgba(0,0,0,0.25);
  }
  .modal {
    position: absolute;
    animation: dialog-zoom 0.4s;
    padding: 20upx 60upx;
		background-color: #fff;
		border-radius: 18px;
		box-sizing: border-box;
  }
}
</style>

 -->
 
 
 